<template>
	<view>
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="1000"
				indicator-active-color="#4289F3" indicator-color="rgba(66, 137, 243, 0.2)">
				<swiper-item v-for="(item,index) in detail.images">
					<view class="swiper-item">
						<image :src="baseurl+item" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="shadow"></view>
			<view class="dropBox">
				<view class="drop select"></view>
				<view class="drop"></view>
			</view>
		</view>
		<view class="difficult">
			<image :src="baseurl+'/imgs/green.png'" mode="widthFix"></image>
			<view class="up">
				<view class="numname">月销 {{detail.sales}} + {{detail.collect}}收藏</view>
				<view class="upTitle">优惠价格</view>
				<view class="upDetail">
					<view class="upMoney"><text>￥</text>{{detail.price}}</view>
					<view class="upName">{{detail.title}}</view>
				</view>
				<view class="upThree">
					<view class="upBox">
						<view class="upLname">限制</view>
						<view class="upCon">{{detail.xianzhi||'暂无'}}</view>
					</view>
					<view class="upBox">
						<view class="upLname">须知</view>
						<view class="upCon">{{detail.xuzhi||'暂无'}}</view>
						<!-- <image src="/static/next.png" mode="widthFix"></image> -->
					</view>
					<view class="upBox">
						<view class="upLname">保障</view>
						<view class="upCon">{{detail.baozhang||'暂无'}}</view>
						<!-- <image src="/static/next.png" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="headShop">
					<view class="lCon" @click="shopDetail">
						<image :src="baseurl+detail.shop_info.avatar" mode="aspectFill"></image>
						<view class="shopMore">
							<view class="shopName">{{detail.shop_info.shopname}}</view>
							<view class="shopStar">
								<image
									:src="detail.shop_info.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
									mode="widthFix"></image>
								<image
									:src="detail.shop_info.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
									mode="widthFix"></image>
								<image
									:src="detail.shop_info.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
									mode="widthFix"></image>
								<image
									:src="detail.shop_info.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
									mode="widthFix"></image>
								<image
									:src="detail.shop_info.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
									mode="widthFix"></image>
								<view class="anum">{{detail.shop_info.score}}</view>
							</view>
						</view>
					</view>
					<view class="lc-twos">
						<view class="call" @click="address">
							<image :src="baseurl+'/imgs/re1.png'" mode="widthFix"></image>
							<view>导航</view>
						</view>
						<view class="call" @click="call">
							<image :src="baseurl+'/imgs/re2.png'" mode="widthFix"></image>
							<view>电话</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">服务详情</view>
		</view>
		<view class="boxCon">
			<rich-text :nodes="detail.fuwuxiangqing"></rich-text>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">购买须知</view>
		</view>
		<view class="boxCon">
			<rich-text :nodes="detail.goumaixuzhi"></rich-text>
		</view>
		<view class="title">
			<view class="line"></view>
			<view class="titleName">评价({{detail.comment_num}})</view>
			<view class="comment-all" @click="comment">
				<view>查看全部</view>
				<image src="/static/next.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="comment-list">
			<!-- <view class="lc-laber">
				<view>味道好</view>
				<view>服务好</view>
				<view>性价比高</view>
				<view>装修精美</view>
			</view> -->
			<view class="comment">
				<view class="more-list" v-for="(item,index) in detail.comment.data">
					<view class="more-user">
						<image :src="item.user.avatar" mode="aspectFill" class="user-img">
						</image>
						<view class="user-detail">
							<view class="user-infor">
								<view>{{item.user.nickname}}</view>
							</view>
							<view class="time">{{item.createtime}}</view>
						</view>
					</view>
					<view class="dudu">
						<image
							:src="item.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="item.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
					</view>
					<view class="conswor">{{item.content}}</view>
					<view class="sp-imgs">
						<image :src="img" mode="aspectFill" v-for="(img,num) in item.images"
							@click="lookImage(index,num,img)">
						</image>
					</view>
					<view class="shop-hf" v-if="item.reply">
						<view class="s-title">商家回复：</view>
						<view class="s-words">{{item.reply}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null"></view>
		<view class="bottomBox">
			<view class="lc-qian">
				<image :src="detail.collect_zt == 0 ? baseurl+'/imgs/re3.png' : baseurl+'/imgs/re33.png'"
					mode="widthFix" @click="tabCollectState"></image>
				<view>
					<image :src="baseurl+'/imgs2/fenxiang.png'" mode="widthFix"></image>
					<button open-type="share"></button>
				</view>
			</view>

			<view class="lc-buy" @click="show">立即订购</view>
		</view>
		<view class="lc-black" v-if="type" @click="close">
			<view class="lc-white" @click.stop="">
				<view class="lc-goods-box">
					<image :src="baseurl+detail.image" mode="aspectFill"></image>
					<view class="lc-goods-detail">
						<view class="lc-goods-name">{{detail.title}}</view>
						<view class="lc-goods-sow">
							<view class="lc-goods-money">￥{{detail.price}}</view>
							<view class="lc-goods-ths">
								<view class="lc-goods-edit" @click="decrease">-</view>
								<view class="lc-goods-num">{{numbers}}</view>
								<view class="lc-goods-add" @click="increase">+</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lc-goods-foot">
					<view class="lc-goods-r" @click="sub">提交订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				content: "富文本",
				baseurl: getApp().globalData.baseurl,
				score: 5,
				type: false,
				app: getApp().globalData,
				detail: {},
				gid: '',
				numbers: 1
			};
		},
		onLoad(e) {
			this.gid = e.id
			this.app.post('/api/chef/index/store_goods_info', {
				goods_id: e.id,
				page: 1
			}).then(res => {
				console.log(res)
				this.detail = res
			})
			this.app.post('/api/wanlshop/user/addzuji', {
				id: e.id,
			}).then(res => {
				console.log(res)
			})
			
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		methods: {
			shopDetail() {
				uni.navigateTo({
					url: '/pages/lc/shopDetail/shopDetail?id=' + this.detail.shop_id
				})
			},
			increase() {
				this.numbers++;
			},
			// 减少数量，最少为 1
			decrease() {
				if (this.numbers > 1) {
					this.numbers--;
				}
			},
			delCart() {
				this.app.post('/api/chef/index/empty_cart', {
					shop_id: this.detail.shop_info.id,
				}).then(res => {
					console.log(res)
				})
			},
			tabCollectState() {
				this.app.post('/api/wanlshop/user/addshoucang', {
					id: this.detail.id,
					type: 2
				}).then(res => {
					console.log(res)
					if (this.detail.collect_zt == 1) {
						this.detail.collect_zt = 0
						uni.showToast({
							title: '取消收藏',
							icon: "none"
						})
					} else {
						this.detail.collect_zt = 1
						uni.showToast({
							title: '已收藏',
							icon: "none"
						})
					}
				})
			},
			address() {
				uni.openLocation({
					latitude: Number(this.detail.shop_info.latitude),
					longitude: Number(this.detail.shop_info.longitude),
					scale: 18,
					name: this.detail.shop_info.shopname,
					address: this.detail.shop_info.address,
					fail: (res) => {
						console.log(res)
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: String(this.detail.shop_info.mobile),
					fail: (res) => {
						console.log(res)
					}
				});
			},
			comment() {
				uni.navigateTo({
					url: '/pages/lc/comment/comment?id=' + this.detail.id
				})
			},
			show() {
				// this.type = true
				this.app.post('/api/chef/index/add_cart', {
					shop_id: this.detail.shop_info.id,
					goods_id: this.gid,
					sku_id: this.detail.sku[0].id,
					num: this.numbers
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: '/pages/sc/settlement/settlement?id=' + this.detail.shop_info.id
					})
				})
			},
			sub() {
				this.app.post('/api/chef/index/add_cart', {
					shop_id: this.detail.shop_info.id,
					goods_id: this.gid,
					sku_id: this.detail.sku[0].id,
					num: this.numbers
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: '/pages/sc/settlement/settlement?id=' + this.detail.shop_info.id
					})
				})
			},
			close() {
				this.type = false
			}
		},
		onShareAppMessage: function() {
			const promise = new Promise(resolve => {
				resolve({
					title: this.detail.title,
					path: '/pages/lc/goodsDetail/goodsDetail?id='+this.gid,
				})
			})
			return {
				promise
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.headcontent {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		z-index: 6666;

		.contentbox {
			width: 750rpx;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				position: relative;
				z-index: 999;
			}
		}
	}

	.banner {
		width: 750rpx;
		height: 498rpx;
		position: relative;

		.shadow {
			width: 750rpx;
			height: 498rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			// background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
		}

		swiper {
			width: 750rpx;
			height: 498rpx;
			position: relative;



			.swiper-item {
				width: 750rpx;
				height: 498rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.dropBox {
			width: 700rpx;
			margin-left: 34rpx;
			display: flex;
			position: absolute;
			bottom: 60rpx;

			.drop {
				width: 46rpx;
				height: 7rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50rpx;
				margin-right: 8rpx;
			}

			.select {
				background-color: #fff;
			}
		}
	}

	.difficult {
		width: 750rpx;
		margin-top: -45rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 750rpx;
		}

		.up {
			position: absolute;
			top: 0;
			// width: 500rpx;

			.numname {
				width: 704rpx;
				margin-right: 46rpx;
				margin-top: 14rpx;
				text-align: right;
				color: #fff;
				font-size: 26rpx;
			}

			.upTitle {
				color: #FB4E2F;
				font-size: 26rpx;
				margin-left: 63rpx;
			}

			.upDetail {
				width: 650rpx;
				margin-left: 50rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px dashed #D8D8D8;

				.upMoney {
					color: #FB4E2F;
					font-size: 60rpx;

					text {
						font-size: 36rpx;
					}
				}

				.upName {
					font-size: 36rpx;
					color: #3D3D3D;
					margin-left: 68rpx;
				}
			}

			.upThree {
				width: 630rpx;
				margin-left: 60rpx;
				height: 233rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: center;

				.upBox {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 10rpx 0;

					.upLname {
						font-size: 26rpx;
						color: #666666;
					}

					.upCon {
						margin-left: 37rpx;
						font-size: 26rpx;
						color: #999999;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						position: relative;
						margin-top: 2rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.headShop {
			width: 630rpx;
			margin-left: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 40rpx;
			border-top: 1px solid #eee;

			.lCon {
				display: flex;
				align-items: center;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 8rpx;
				}

				.shopMore {
					margin-left: 18rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.shopName {
						width: 100%;
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.shopStar {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 6rpx;
						}

						.anum {
							font-size: 26rpx;
							color: #FB4E2F;
							margin-left: 6rpx;
						}

						.amoney {
							font-size: 26rpx;
							color: #999999;
							margin-left: 28rpx;
						}
					}

					.time {
						width: 100%;
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.lc-twos {
				display: flex;
			}

			.call {
				width: 52rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-left: 42rpx;

				image {
					width: 52rpx;
					height: 52rpx;
				}

				view {
					font-size: 26rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
		}
	}

	.title {
		width: 664rpx;
		margin-left: 43rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
		position: relative;

		.line {
			width: 8rpx;
			height: 34rpx;
			background-color: #84BD00;
			border-radius: 50rpx;
		}

		.titleName {
			font-size: 33rpx;
			color: #3D3D3D;
			margin-left: 17rpx;
		}

		.comment-all {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;

			view {
				font-size: 24rpx;
				color: #999999;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}
	}

	.boxCon {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;

		image {
			width: 100%;
		}
	}

	.bottomBox {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 17rpx 50rpx 0px rgba(0, 0, 0, 0.13);
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lc-qian {
			width: 150rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;

			view {
				position: relative;

				button {
					position: absolute;
					width: 54rpx;
					height: 54rpx;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}

		image {
			width: 54rpx;
			height: 54rpx;
		}

		.lc-buy {
			width: 506rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background-color: #84BD00;
			border-radius: 50rpx;
			margin-right: 30rpx;
		}

	}

	.null {
		width: 750rpx;
		height: 160rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.comment-list {
		width: 690rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-left: 30rpx;

		.lc-laber {
			width: 630rpx;
			padding: 30rpx 0;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;

			view {
				font-size: 24rpx;
				color: #84BD00;
				background: rgba(132, 189, 0, 0.1);
				border-radius: 10rpx;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.comment {
			width: 690rpx;



			.c-head {
				width: 630rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				padding-top: 30rpx;

				.c-h-name {
					font-size: 26rpx;
					margin-right: 80rpx;
					color: #333333;

					text {
						color: #999999;
						margin-left: 10rpx;
					}
				}

				.select-c-h-name {
					font-size: 26rpx;
					margin-right: 80rpx;
					color: #84BD00;

					text {
						color: #999999;
						margin-left: 10rpx;
					}
				}
			}

			.c-tab {
				width: 690rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				padding: 30rpx 0;

				.c-t-name {
					background-color: #F6F6F6;
					padding: 8rpx 20rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}

				.select-c-t-name {
					background: rgba(140, 47, 82, 0.1);
					padding: 8rpx 20rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					color: #84BD00;
				}
			}

			.more-list {
				width: 690rpx;
				padding: 30rpx 0;
				background-color: #FFFFFF;
				border-bottom: 1px solid #eee;

				.more-user {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					align-items: center;

					.user-img {
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}

					.user-detail {
						width: 550rpx;
						margin-left: 18rpx;
						display: flex;
						justify-content: space-between;

						.user-infor {
							display: flex;
							align-items: center;

							view {
								font-size: 24rpx;
								color: #333333;
							}

							image {
								width: 73rpx;
								height: 30rpx;
								margin-left: 10rpx;
							}
						}

						.time {
							font-size: 22rpx;
							color: #999999;
						}
					}
				}

				.dudu {
					width: 630rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					margin-left: 30rpx;

					view {
						font-size: 24rpx;
						color: #9E9E9E;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 12rpx;
					}
				}

				.conswor {
					width: 630rpx;
					font-size: 30rpx;
					margin-left: 30rpx;
					color: #333333;
					margin-top: 20rpx;
				}

				.sp-imgs {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;

					image {
						width: 180rpx;
						height: 180rpx;
						margin-top: 20rpx;
						margin-right: 20rpx;
						border-radius: 16rpx;
					}
				}

				.shop-hf {
					width: 630rpx;
					margin-left: 30rpx;
					padding: 30rpx;
					background-color: #F6F6F6;
					border-radius: 16rpx;
					margin-top: 20rpx;

					.s-title {
						font-size: 24rpx;
						color: #9E9E9E;
					}

					.s-words {
						font-size: 24rpx;
						color: #9E9E9E;
						margin-top: 20rpx;
					}
				}

				.tj-box {
					width: 690rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.tj-title {
						font-size: 24rpx;
						color: #333333;
					}

					.tj-shop {
						display: flex;
						align-items: center;
						background: rgba(140, 47, 82, 0.1);
						padding: 10rpx 20rpx;
						border-radius: 10rpx;

						view {
							font-size: 26rpx;
							color: #84BD00;
						}

						image {
							width: 20rpx;
							height: 20rpx;
							margin-top: 4rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
		}
	}

	.lc-black {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .7);
		z-index: 9999999999;

		.lc-white {
			width: 750rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			position: fixed;
			bottom: 0;

			.lc-goods-box {
				width: 690rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 16rpx;
				}

				.lc-goods-detail {
					width: 504rpx;
					height: 142rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.lc-goods-name {
						width: 100%;
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.lc-goods-sow {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lc-goods-money {
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.lc-goods-ths {
							display: flex;
							align-items: center;

							.lc-goods-edit {
								width: 48rpx;
								height: 48rpx;
								color: #999999;
								border: 1px solid #999999;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
							}

							.lc-goods-num {
								font-size: 30rpx;
								color: #333333;
								margin-left: 20rpx;
								margin-right: 20rpx;
							}

							.lc-goods-add {
								width: 48rpx;
								height: 48rpx;
								color: #FFFFFF;
								border: 1px solid #84BD00;
								background-color: #84BD00;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
							}
						}
					}
				}
			}

			.lc-goods-details {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				width: 690rpx;
				margin-top: 30rpx;

				.lc-a-box {
					width: 630rpx;
					margin-left: 30rpx;
					height: 88rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eee;

					.lc-a-box-l {
						font-size: 30rpx;
						color: #3D3D3D;

						text {
							color: #999999;
						}
					}

					.lc-a-box-r {
						color: #3D3D3D;
						font-size: 30rpx;
					}
				}

				.lc-b-box {
					width: 630rpx;
					margin-left: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.lc-b-box-two {
						display: flex;
						align-items: center;

						.lc-b-box-title {
							width: 40rpx;
							height: 40rpx;
							background-color: #84BD00;
							font-size: 22rpx;
							color: #FFFFFF;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.lc-b-box-name {
							font-size: 26rpx;
							color: #3D3D3D;
							margin-left: 12rpx;
						}
					}

					.lc-b-box-next {
						display: flex;
						align-items: center;

						view {
							font-size: 26rpx;
							color: #84BD00;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}

					.lc-b-box-price {
						font-size: 26rpx;
						color: #84BD00;
					}
				}

				.lc-c-box {
					width: 630rpx;
					margin-left: 30rpx;
					text-align: right;
					font-size: 30rpx;
					color: #84BD00;
					line-height: 88rpx;
					margin-top: 30rpx;
					border-top: 1px solid #eee;

					text {
						color: #3D3D3D;
						margin-left: 10rpx;
					}
				}
			}

			.lc-goods-foot {
				width: 750rpx;
				background-color: #FFFFFF;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;

				.lc-goods-l {
					margin-left: 30rpx;

					.lc-goods-lmoney {
						font-size: 24rpx;
						color: #84BD00;

						text {
							font-size: 36rpx;
						}
					}

					.lc-goods-rmoney {
						font-size: 24rpx;
						color: #999999;
						margin-top: 6rpx;
					}
				}

				.lc-goods-r {
					background-color: #84BD00;
					color: #FFFFFF;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 690rpx;
					height: 80rpx;
				}
			}
		}
	}

	.whites {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0;
		margin-top: 30rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 660rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;

			.scroll-view-item_H {
				display: inline-block;
				width: 248rpx;
				margin-right: 30rpx;

				.border {
					border: 2px solid #9B5114 !important;
					border-radius: 20rpx;
					box-sizing: border-box;
				}

				.co-up {
					width: 248rpx;
					height: 178rpx;
					position: relative;
					box-sizing: border-box;
					border: 2px solid #fff;

					image {
						width: 248rpx;
						height: 170rpx;
					}

					.juti {
						position: absolute;
						width: 100%;
						height: 170rpx;
						left: 0;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						top: 0;
						background-color: #FEF7E5;
						border-radius: 20rpx;
						overflow: hidden;

						.ti1 {
							width: 180rpx;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
							line-height: 30rpx;
							background-color: #FEE3AE;
							border-radius: 0 0 20rpx 20rpx;
						}

						.ti2 {
							width: 100%;
							text-align: center;
							font-size: 36rpx;
							color: #9B5114;

							.ts1 {
								font-size: 22rpx;
							}

							.ts2 {
								font-size: 22rpx;
								color: #CCAD8E;
							}
						}

						.ti3 {
							width: 100%;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
						}

						.ti4 {
							width: 100%;
							text-align: center;
							font-size: 24rpx;
							color: #9B5114;
							line-height: 54rpx;
							background-color: #FEE3AE;
						}
					}
				}

				.co-down {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;

					.co-money {
						color: #9B5114;
						font-size: 30rpx;

						text {
							color: #999999;
							font-size: 24rpx;
							margin-left: 10rpx;
							text-decoration: line-through;
						}
					}

					.co-qg {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: linear-gradient(270deg, #DB7C3B 0%, #E69850 100%);
					}

					.co-qgs {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: #9E9E9E;
					}
				}
			}
		}

		.pu {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.pu-title {
				font-size: 26rpx;
				color: #333333;
			}

			.pu-con {
				display: flex;
				align-items: center;


				view {
					font-size: 26rpx;
					color: #333333;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>